<%@ page language="java"  isELIgnored="false" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" href="css/shopCart.css" /> -->
<style type="text/css">
/* 	#top, header, nav, main, footer ,div{ */
/* 		border: 1px solid red;  */
/* 	} */
	body {
		width: 1024px;
		margin: 0 auto;
	}
    #top {
		height: 35px;
		line-height: 35px;

	}
	a{
		text-decoration: none;
	}
	img {
		vertical-align: middle;	
		transform:scale(0.5);
	}
	
	#top-home {
		float: right;
		margin-right: 50px;
    }
    header {
		height: 100px;
		display: flex;
		align-items: center;
	}
	form{
		display: flex;
		align-items: center;
	}
	input[type=search] {
		height: 40px;
		width: 400px;
		border-radius: 10px;
	}
	
	input[type=submit] {
		background-image: url(image/search.png); 
		height: 40px;
		width: 40px;
		border-radius: 10px;
	}
	.item{
		display: flex;
		height: 100px;
		justify-content: center;
		align-items: center;
		border-top: 1px solid  gray;
		border-bottom: 1px solid gray;
	
	}
	.item span{
		width: 30px;
		text-align: center;
	}
	
	.cell{
	    display: flex;
	    justify-content: center;
	    flex-basis:50px;
	}
	.cell1{
	    flex-grow: 1;/* 子元素如何分配父元素的剩余空间，值越大，索取的越厉害。 */

	}
	.cell3{
	    flex-grow: 3;
	}
	
	 .total{
           position:fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
           width:1024px;/*总宽度，因为是fixed定位，所以已经脱离文档流，不受body正常文档流控制*/
 		   margin:5px,auto;/*上下5px,左右居中*/
 		   bottom:0px;/*纵坐标从底部开始*/
 		   background-color: lightgray ;
 		   height: 40px;
 		   line-height: 40px;/*行高和高度相等，则文字居中显示*/
 		   display: flex;
 		   justify-content:flex-end; /*设置弹性盒子容器，其弹性元素右对齐*/
        }
        .total span{
        	font-size: 24px;/*设置字号*/
        	color:red;/*设置字体颜色*/
        }
        .total button{
        	font-size: 24px;
        	background-color: red;
        	color:white;
        	width:100px;
        	border:0px;
        	margin-left: 10px; /*为了和左边的价钱span产生距离*/
        }
		/*全选框头部样式*/
		.checkAllTotal{
			margin-left: 180px;
		}
		.checkbox1{
			margin-left: 300px;
		}
		.checkbox2{
			margin-left: 215px;
		}
		.checkbox3{
			margin-left: 100px;
		}
		.checkbox4 {
			margin-left: 120px;
		}

</style>
</head>
<body>
	<div id="top">
		<a href="login.jsp">登录</a>
		<a href="HomePageServlet">注册</a>
		<a id="top-home" href="HomePageServlet">首页</a>
	</div>
	<header>
		<img alt="" src="image/shopCart.png">
		<form action="">
			<input type="search" placeholder="输入搜索内容">
			<input type="submit" value="">
		</form>
	</header>
	<main>
		<%--全选框--%>
		<div class="cell1">
			<input type="checkbox" id="checkAll" onclick="checkAll()"  ${sessionScope.myCart.allChecked?"checked":""}/>
			<span class="checkbox1">商品信息</span>
			<span class="checkbox2">商品价格</span>
			<span class="checkbox3">数量</span>
			<span class="checkbox4">移除</span>
		</div>
	    <c:forEach var="cartItem" items="${myCart.itemList}">
		<div class="item">
			<input class="" type="checkbox" name="itemCheckbox" onclick="updateShopCartByCheckInput(${cartItem.value.commodity.id})"  ${cartItem.value.checked? "checked":""} />
			<img class="cell" src="${cartItem.value.commodity.imgPath}"/>
			<div class="cell cell3">
					${cartItem.value.commodity.info}
			</div>
			<div class="cell cell1">
					${cartItem.value.commodity.price}
			</div>
			<div class="cell cell1">

				<c:if test="${cartItem.value.itemZero == true}">
					<button onclick="updateShopCartByReduceBtn(${cartItem.value.commodity.id})" id="reduce" disabled>-</button>
				</c:if>
				<c:if test="${cartItem.value.itemZero == false}">
					<button onclick="updateShopCartByReduceBtn(${cartItem.value.commodity.id})" id="reduce">-</button>
				</c:if>

				<span>${cartItem.value.num}</span>
				<button onclick="updateShopCartByAddBtn(${cartItem.value.commodity.id})">+</button>
			</div>


			<div class="cell cell1">
				<button onclick="removeByRemoveBtn(${cartItem.value.commodity.id})">移除</button>
			</div>
		</div>
	    </c:forEach>
	</main>
	<div class="total">
		<div class="totalContent">总计（不含运费）：<span>¥ ${myCart.total}</span><button>结算</button></div>
	</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/shopCart.js">
</script>
</body>
</html>